<template>
  <el-drawer title="建议内容" size="600px" :with-header="false" :visible.sync="drawer">
    <div class="advice-box">
      <div class="advice-content">
        <div class="advice-title">建议内容</div>
        <div class="advice-option">
          <div class="left">项目名称：</div>
          <span>{{adviceContent.projectName}}</span>
        </div>
        <div class="advice-option">
          <div class="left">建议标签：</div>
          <div v-for="(item, index) in adviceContent.tagNameList" :key="index" class="label-item">
            {{item}}
          </div>
        </div>
        <el-row>
          <el-col :span="12">
            <div class="advice-option">
              <div class="left">发起人：</div>
              <span style="font-size: 15px;">{{ adviceContent.proposerRealName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="advice-option">
              <div class="left">发起时间：</div>
              <span style="font-size: 15px;">{{ adviceContent.createTime }}</span>
            </div>
          </el-col>
        </el-row>
        <div class="advice-option">
          <div class="left">建议内容：</div>
          <div class="content">{{ adviceContent.suggestContent }}</div>
        </div>
      </div>
      <div class="advice-history">
        <div class="advice-title">历史回复</div>
        <div v-for="(item, index) in historyReply" :key="index">
          <div class="history-box">
            <div style="flex: 1;">
              <div style="color: #000000;font-weight: bold;word-break: break-all;">{{item.content}}</div>
              <div style="margin-top:10px; font-size: 14px;"><span>{{item.createTime}}</span> <span>{{item.replierRealName}}</span></div>
            </div>
            <el-button style="height: 40px;" type="primary" @click="deleteId(item.projectSuggestionReplyId)">删除</el-button>
          </div>
        </div>
      </div>
      <div class="advice-add">
        <div class="advice-title add-reply">新增回复</div>
        <div>
          <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="adviceParams.content"></el-input>
        </div>
      </div>
      <div class="advice-submit">
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { queryProjectReply, querySubmitReply } from '@/api/singleraView/userAdvice'
import { deleteSubmitReply } from '@/api/singleraView/userAdvice'
export default {
  data() {
    return {
      drawer: false,
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      suggestId: '',
      adviceContent: {},
      historyReply: [],
      adviceParams: {
        content: '',
        deleteProjectSuggestionReplyIdList: [],
        projectSuggestionId: ''
      }
    }
  },
  methods: {
    init(id, data){
      this.drawer = true
      this.adviceContent = data
      this.adviceParams.content = ''
      this.adviceParams.projectSuggestionId = id
      this.suggestId = id
      this.adviceParams.deleteProjectSuggestionReplyIdList = []
      this.queryHistoryList()
    },
    deleteId(id) {
      deleteSubmitReply(id).then(res => {
        this.queryHistoryList()
      })
    },
    queryHistoryList(){
      queryProjectReply(this.suggestId).then(res => {
        this.historyReply = res
      })
    },
    submit() {
      if(!this.adviceParams.content){
        return this.$message({type: 'warning', message: '请填写回复'})
      }
      querySubmitReply(this.adviceParams).then(res => {
        this.$emit('update')
        this.drawer = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
.advice-box{
  position: relative;
  padding: 20px;
  height: 100%;
  overflow: auto;
  .advice-title{
    font-weight: bold;
    font-size: 18px;
    margin: 20px 0 15px 0;
  }
  .add-reply:before{
    content: '*';
    color: red;
  }
  .advice-option{
    padding: 10px 0;
    font-size: 15px;
    display: flex;
    flex-direction: row;
    .content{
      flex: 1;
    }
    .label-item{
      margin-right: 10px;
      border: 1px solid #bfbfbf;
      border-radius: 5px;
      padding: 5px;
      font-size: 14px;
    }
    .left{
      width: 80px;
    }
  }
  .history-box{
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #bfbfbf;
    padding: 10px;
    border-radius: 5px;
    background: #bfbfbf;
  }
  .advice-submit{
    margin: 20px 0;
    text-align: center;
  }
}
</style>
